<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- .lazy 
        在vue的v-model绑定中，对于输入形标签，默认完成input事件绑定
                .lazy 修饰就是将 input 事件切换为 change 事件-->
        <p>{{msg}}</p>
        <input type="text" v-model="msg">
        <!-- 失去焦点时改变内存的值 -->
        <input type="text" v-model.lazy="msg">


        <!-- 
            .number
             在v-model完成修改数据赋值前，进行字符串到数值转换
                本质上调用了 js  Number.parseFloat()
                1、如果第一个位是可以转换为数值的，直接调用  Number.parseFloat()
                2、如果第一位就是非数值，会停止转换数值直接进行字符串的记录
         -->
         <p>num:{{num}}</p>
         <!-- 在内存中的值为字符 -->
         <input type="number" v-model="num">
         <input type="number" v-model.number="num">
         <input type="range" min="0" max="10" step="1" v-model.number="num">

         <!-- 
             .trim
          -->
          <p>info:{{info}}</p>
          <input type="text" v-model.trim="info">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"测试",
            num:2,
            info:"默认值"
        }
    });
</script>
</html>